<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>用户 - 渡物 Dimension</title>
  <link rel="stylesheet" href="assets/css/style.css">
</head>

<div class="logo-sticker">
  <img src="assets/images/logo.png" alt="渡物 Dimension Logo">
</div>

<div class="top-right-img">
    <img src="assets/images/right_nav.png" alt="top right image">
</div>

<header class="site-header">
  <div class="nav-container">

    <!-- 导航菜单 -->
    <nav class="nav-menu">
	  <div class="nav-item">
          <a href="welcome.html">首页</a>
        </div>
		
      <div class="nav-item">
        <a href="designs.html">设计</a>
      </div>
	  
      <div class="nav-item dropdown">
        <span><a href="categories.html">商品<a></span>
        <div class="dropdown-content">
          <a href="categories.html#基础">基础
		  <img src="assets/images/1.png" alt="基础" class="menu-img">
		  </a>
          <a href="categories.html#灯类">灯类
		  <img src="assets/images/2.png" alt="灯类" class="menu-img">
		  </a>
          <a href="categories.html#床类">床类
		  <img src="assets/images/3.png" alt="床类" class="menu-img">
		  </a>
          <a href="categories.html#桌类">桌类
		  <img src="assets/images/4.png" alt="桌类" class="menu-img">
		  </a>
          <a href="categories.html#椅类">椅类
		  <img src="assets/images/5.png" alt="椅类" class="menu-img">
		  </a>
		  <a href="categories.html#凳类">凳类
		  <img src="assets/images/6.png" alt="凳类" class="menu-img">
		  </a>
		  <a href="categories.html#沙发">沙发
		  <img src="assets/images/7.png" alt="沙发" class="menu-img">
		  </a>
		  <a href="categories.html#柜类">柜类
		  <img src="assets/images/8.png" alt="柜类" class="menu-img">
		  </a>
		  <a href="categories.html#架类">架类
		  <img src="assets/images/9.png" alt="架类" class="menu-img">
		  </a>
		  <a href="categories.html#装饰">装饰
		  <img src="assets/images/10.png" alt="装饰" class="menu-img">
		  </a>
		  <a href="categories.html#组合">组合
		  <img src="assets/images/11.png" alt="组合" class="menu-img">
		  </a>
		  <a href="categories.html#其他">其他
		  <img src="assets/images/12.png" alt="其他" class="menu-img">
		  </a>
        </div>
      </div>

      <div class="nav-item search">
        <input type="text" placeholder="搜索商品..." />
      </div>

      <div class="nav-item">
        <a href="settings.html">设置</a>
      </div>

      <div class="nav-item">
        <a href="user.html"  style="color: var(--primary); font-weight: 600;">个人中心</a>
      </div>

      <div class="nav-item">
        <a href="contact.html">联系我们</a>
      </div>
      <div class="nav-item">
          <button class="music-toggle btn btn-outline">🎵</button>
      </div>
    </nav>
  </div>
</header>

<body>
  
  <div class="nav-spacer"></div>

<div class="container">
    <section>
      <h2>个人中心</h2>
      <div class="form-card" id="user-info">
        <script>
          // 页面加载时检查登录状态并显示用户信息
          window.onload = function() {
            const user = JSON.parse(localStorage.getItem("user") || "null");
            const isLoggedIn = localStorage.getItem("isLoggedIn");

            if (!user || isLoggedIn !== "true") {
              alert("请先登录");
              window.location.href = "login.html";
            } else {
              document.getElementById("user-info").innerHTML = `
                <label>
                  用户名:
                  <input type="text" id="username" value="${user.username}" class="u-mt-1">
                </label>
                <button class="btn u-mt-2" id="save-username">保存用户名</button>
                <label class="u-mt-2">
                  新密码:
                  <input type="text" id="new-password" class="u-mt-1">
                </label>
                <button class="btn u-mt-2" id="save-password">保存密码</button>
                <button class="btn u-mt-2" id="logout-btn">退出登录</button>
              `;

              // 保存用户名
              document.getElementById("save-username").addEventListener("click", function() {
                const newUsername = document.getElementById("username").value.trim();
                if (newUsername && newUsername !== user.username) {
                  user.username = newUsername;
                  localStorage.setItem("user", JSON.stringify(user));
                  alert("用户名已更新");
                }
              });

              // 保存密码
              document.getElementById("save-password").addEventListener("click", function() {
                const newPassword = document.getElementById("new-password").value.trim();
                if (newPassword) {
                  user.password = newPassword;
                  localStorage.setItem("user", JSON.stringify(user));
                  alert("密码已更新");
                }
              });

              // 退出登录
              document.getElementById("logout-btn").addEventListener("click", function() {
                localStorage.setItem("isLoggedIn", "false");
                alert("已退出登录");
                window.location.href = "login.html";
              });
            }
          };
        </script>
      </div>
    </section>
  </div>


  <footer class="site-footer">
    <p>&copy; 2025 渡物 Dimension. 保留所有权利。</p>
  </footer>
<script src="assets/js/music.js"></script>
<script src="assets/js/search.js"></script>
</body>

</html>